<!--
 * @Descripttion:
 * @version: 1.0.1
 * @Author: daipeng
 * @Date: 2020-09-16 13:58:47
 * @LastEditors: daipeng
 * @LastEditTime: 2020-09-22 13:34:43
-->
<template>
	<div class="personnelAdd">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/dataExpress' }">
				<i class="lh fw_300 lh-seller fz_20"></i>
			</el-breadcrumb-item>
			<el-breadcrumb-item>商圈管理</el-breadcrumb-item>
			<el-breadcrumb-item>新建商圈</el-breadcrumb-item>
		</el-breadcrumb>

		<div class="content_Box box-shadow mt_15 px_10">
			<h4 class="border-bottom pb_10 mb_20">新建商圈</h4>
			<div class="auditCentent">
				<div class="row-info clear">
					<div class="fl title-key">
						<i class="lhadmin"></i>
						<span><i class="lhadmin lhadmin-wujiaoxing"></i>商圈名称：</span>
					</div>
					<div class="fl list-cont">
						<el-input v-model="addRoleArr.name"></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">
						<i class="lhadmin"></i>
						<span><i class="lhadmin lhadmin-wujiaoxing"></i>市：</span>
					</div>
					<div class="fl list-cont">
						<el-select v-model="addRoleArr.city_arr" placeholder="请选择" @change="changeBtndialog">
							<el-option
								v-for="item in cityList"
								:key="item.id"
								:label="item.city_name"
								:value="`${item.id}|${item.city_name}|${item.city_sn}`"
							></el-option>
						</el-select>
					</div>
				</div>
				<div class="clear"></div>
				<div class="clear mt_20">
					<div class="mb_10 roleFunctionBox">
						<div class="pl_10 pb_10">
							<!-- 区域画图 -->
							<map-area @func="getMsgFormSon" ref="mychildarea" :allAreaMesData="allAreaMes"></map-area>
							<div class="wrap_h5">
								<h5>说明：1、黑色圆点可拖动，双击可删除</h5>
								<h5 style="text-indent: 3em;">2、灰色圆点拖拽后变为黑色圆点，同时新增两个灰色圆点</h5>
								<!-- <h5 style="text-indent:3em;">3、点击“重绘”可清空所有圆点，重新绘制</h5> -->
							</div>
						</div>
					</div>
				</div>
			</div>
			<div slot="footer" style="text-align: center;">
				<span class="btnOK mr_20" @click="readctSubmit">确 定</span>
				<span class="resetBtn" @click="back">返 回</span>
			</div>
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import MapArea from '../components/Maparea.vue'
import { fetchAreaList } from '@/api/shop.js'

export default {
	name: 'MerchantsEdit',
	data() {
		return {
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			cityList: [], //城市列表
			addRoleArr: {
				name: '',
				city_arr: '',
				city_id: '',
				city_name: '',
				city_sn: '',
				path: ''
			},
			allAreaMes: ''
		}
	},
	components: { MapArea },
	mounted() {
		this.getcityList()
	},
	watch: {
		com_city_arr: {
			handler(newName, oldName) {
				this.getAreaList(newName)
			}
		}
	},
	computed: {
		com_city_arr() {
			return this.addRoleArr.city_arr
		}
	},
	methods: {
		getcityList() {
			//获取城市列表
			let fn = new FormData()
			this.$http.post(this.url + '/city/list', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						this.cityList = res.data.data.list
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		getMsgFormSon(data) {
			// console.log(data);
			//先处理data数组为指定的字符串格式；
			var arr1 = ''
			var last
			for (var i = 0; i < data.length; i++) {
				arr1 += data[i] + ';'
			}

			// last = data[0].toString();
			// arr1 += last;
			// console.log(arr1);
			this.addRoleArr.path = arr1
		},
		//确定新增商圈
		readctSubmit() {
			if (
				this.addRoleArr.name == '' ||
				this.addRoleArr.city_id == '' ||
				this.addRoleArr.city_name == '' ||
				this.addRoleArr.city_sn == ''
			) {
				this.$message.error('请填写必填项')
				return
			}
			//先去触发子组件的方法
			this.$refs.mychildarea.stopedit()
			//请求新增区域接口
			let fn = new FormData()
			fn.append('area_name', this.addRoleArr.name) //商圈名称
			fn.append('city_id', this.addRoleArr.city_id) //城市ID
			fn.append('city_name', this.addRoleArr.city_name) //城市
			fn.append('city_sn', this.addRoleArr.city_sn) //城市sn
			fn.append('coordinates_list', this.addRoleArr.path) //位置信息

			this.$http.post(this.url + '/area/add', fn).then(
				res => {
					console.log(res.data.data)
					if (res.data.msg == '新增成功!' || res.data.code == '200') {
						this.$message.success(res.data.msg)
						//返回上一级
						this.back()
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		changeBtndialog() {
			let [id, name, sn] = this.addRoleArr.city_arr.split('|') // es6 数组解构赋值
			this.addRoleArr.city_id = id
			this.addRoleArr.city_name = name
			this.addRoleArr.city_sn = sn
		},
		back() {
			//返回
			this.$router.go(-1)
		},
		async getAreaList(newName) {
			// console.log('newName', newName)
			let [id, name, sn] = newName.split('|')

			//获取当前城市下，所有的商圈
			try {
				let ret = await fetchAreaList({
					city_id: id,
					city_name: name
				})
				let area_arr = []
				// 去除无商圈
				ret.list.forEach(it => {
					if (it.id != 0) area_arr.push(it)
				})
				this.allAreaMes = area_arr
			} catch (err) {
				console.log(err)
			}
		}
	},
	filters: {}
}
</script>

<style scoped>
.row-info {
	margin-bottom: 10px;
}
.title-key {
	width: 100px;
}
.list-cont img {
	width: 128px;
}
</style>



// WEBPACK FOOTER //
// src/components/sqArea/AreaAdd.vue